<!DOCTYPE html>
<html lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>
      Margin Boxes - Style
    </title>

    <script src="../../../dist/paged.polyfill.js"></script>


    <style>
      :root{
        font-size: 18px;
      }
      @page {
      size: 800px 800px;
      margin: 30mm 20mm;
      @top-left-corner{
        content: "A";
        background-color: crimson;

      }
      @top-left{
        content: "top-left";
        background-color: coral;

      }
      @top-center{
        content: "top-left";
        background-color: yellow;
      }
      @top-right{
        content: "top-left";
        background-color: coral;
      }
      @top-right-corner{
        content: "B";
        background-color: crimson;
      }
      @right-top{
        content: "right-top";
        border: solid 1px cornflowerblue;
      }
      @right-middle{
        content: "right-middle";
        border: solid 1px aquamarine;
      }
      @right-bottom{
        content: "right-bottom";
        border: solid 1px cornflowerblue;
       }
      @bottom-right-corner{
        content: "C";
        background-color: crimson;
      }
      @bottom-left{
        content: "bottom-left";
        background-color: coral;
      }
      @bottom-center{
        content: "bottom-left";
        background-color: yellow;
      }
      @bottom-right{
        content: "bottom-left";
        background-color: coral;
      }
      @bottom-left-corner{
        content: "D";
        background-color: crimson;
      }
      @left-top{
        content: "left-top";
        border: solid 1px cornflowerblue;
      }
      @left-middle{
        content: "left-middle";
        border: solid 1px aquamarine;
      }
      @left-bottom{
        content: "left-bottom";
        border: solid 1px cornflowerblue;
      }

      }

      p {
        line-height: 22px;
      }



    </style>





  </head>
  <body>


  <section>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
    </p>


  </section>

</body>
</html>
